import { Component, OnInit, Injector, Input } from '@angular/core';
import { DetailBase } from 'app/modules/base/detail-base';
import { map } from 'rxjs/operators';
import { WhitelistEditComponent } from '../whitelist-edit/whitelist-edit.component';
import { MySelection } from 'app/modules/base/selection';
import { WhitelistService, WhiteList, WhitelistOptions } from '../../services/whitelist.service';
import { UsbAuthorizeService } from '../../services/usb-authorize.service';

@Component({
  selector: 'm-whitelist-detail',
  templateUrl: './whitelist-detail.component.html',
  styleUrls: ['./whitelist-detail.component.scss']
})
export class WhitelistDetailComponent extends DetailBase implements OnInit {

  whitelist$ = this.getData<WhiteList>('data');
  authorizedList$ = this.route.data.pipe(map((data) => data['auths']));
  areaList$ = this.route.data.pipe(map((data) => data['zone_list']));

  selection = new MySelection<WhiteList>('id');

  activeAreaID: number;
  isAuthorized: number;
  searchKey: string;
  id: number;

  constructor(
    private injector: Injector, 
    private usbAuthorizeService: UsbAuthorizeService,
    private whitelistService: WhitelistService
  ) {
    super(injector);
  }

  ngOnInit() {
    
    this.route.queryParamMap.subscribe((data) => {
      this.activeAreaID = +(data.get('area_id') || 0);
      this.isAuthorized = +(data.get('is_authorized') || -1);
      this.searchKey = data.get('keywords') || '';
      this.id = +(data.get('id'));
    });
  }

  onActiveAreaID(id: number) {
    if (this.activeAreaID == id) {
      return;
    }
    this.activeAreaID = id;
    this.startSearch();
  }

  onSearchKey(key: string, exec: boolean) {
    if (this.searchKey == key) {
      return;
    }
    this.searchKey = key;
    if (!exec) {
      return;
    }
    this.startSearch();
  }

  onIsAuthorized(isAuthorized: number) {
    if (this.isAuthorized == isAuthorized) {
      return;
    }
    this.isAuthorized = isAuthorized;
    this.startSearch();
  }

  startSearch() {
    let params: WhitelistOptions = { page: 1 };
    if (this.activeAreaID != 0) {
      params['area_id'] = this.activeAreaID;
    }
    if (this.isAuthorized != -1) {
      params['is_authorized'] = this.isAuthorized;
    }
    if (this.searchKey.length != 0) {
      params['keywords'] = this.searchKey;
    }
    params['id'] = this.id;
    this.router.navigate([this.router.url.split('?')[0]], {
      relativeTo: this.route,
      queryParams: params,
    });
  }

  openEdit(data: any) {
    this.dialog.open(WhitelistEditComponent, {data});
  }

  async removeWhitelist(id: number) {
    if ((await this.sweet.confirm('确定要移出白名单吗')).dismiss) {
      return;
    }
    await this.whitelistService.removeWhitelist(id);
    this.router.navigateByUrl('usb-device/table/whitelist')
  }

  refreshAuths() {
    return this.router.navigateByUrl(this.router.url);
  }

  async modifyAuth(data: any) {
    const params = {
      auth_type: Number(!data.is_authorized),
      whitelist_id: this.id,
      pc_id: data.id
    }
    await this.usbAuthorizeService.modifyAuth(params);
    this.toaster.success("操作成功");
    this.reload();
  }

  async patchAuth(auth: number) {
    const selectedKeys = this.selection.keys();
    if (!selectedKeys.length) {
      return;
    }
    const params ={
      pc_ids: this.selection.keys(),
      auth_type: auth,
      whitelist_id: this.id 
    }
    await this.usbAuthorizeService.patchAuth(params);
    this.reload();
    this.toaster.success("操作成功");
  }
}


@Component({
  selector: 'm-pc-status',
  template: `
  <ng-container *ngIf="!status; else elseTemplate">
    <span style="color: green">正常</span>
  </ng-container>
  <ng-template #elseTemplate>
    <span style="color: red">停用</span>
  </ng-template>
  `
})
export class PcStatusComponent {
  @Input() status: number;
  constructor() {}
}

@Component({
  selector: 'm-auth-status',
  template: `
  <ng-container *ngIf="status; else elseTemplate">
    <span style="color: green">已授权</span>
  </ng-container>
  <ng-template #elseTemplate>
    <span style="color: red">未授权</span>
  </ng-template>
  `
})
export class AuthStatusComponent {
  @Input() status: number;
  constructor() {}
}